<template>
  <van-popup
    v-model="isShow"
    :position="position"
    :round="round"
    :style="styles"
    :closeable="closeable"
    :close-icon-position="closePosition"
    @close="closePopup"
  >
    <div class="outBox">
      <div class="outBox-title">移动积分抵扣</div>
      <div class="outBox-detail" v-if="time !== 0">
        已向手机号 {{ hidePhone(phone) }} 发送确认验证码
      </div>
      <div class="outBox-detail" v-else>
        向手机号 {{ hidePhone(phone) }} 发送确认验证码
      </div>
      <div class="outBox-time">
        <span v-if="time === 0" @click="resetCode" style="color: #3e77ff"
          >重新发送</span
        >
        <span v-else>已发送({{ time }})秒</span>
      </div>
      <div></div>
      <div class="outBox-input">
        <van-field
          v-model="number"
          type="number"
          maxlength="6"
          input-align="center"
          placeholder="请输入验证码"
        />
      </div>
      <div class="outBox-bottom active" @click="handOk">
        {{ isLoading ? "下单中..." : "确定" }}
      </div>
    </div>
  </van-popup>
</template>
<script>
import { sendYdSms, payOrder } from "@/api/score";
import { parseTime } from "@/utils/common";
import { hidePhone } from "@/utils/common";
import { Toast } from "vant";
export default {
  name: "popup",
  props: {
    phone: String,
    detail: Object,
    orderReturnDetail: Object,
    show: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
    },
    round: {
      type: Boolean,
      default: false,
    },
    styles: {
      type: String,
    },
    closeable: {
      type: Boolean,
    },
    closePosition: {
      type: String,
    },
  },
  watch: {
    show: {
      deep: true,
      handler: function (val) {
        if (val) {
          this.setTimer();
          this.isShow = val;
        }
      },
    },
  },
  data() {
    return {
      isShow: false,
      number: "",
      timer: null,
      time: 60,
      isLoading: false,
    };
  },
  methods: {
    closePopup() {
      clearInterval(this.timer);
      this.timer = null;
      this.time = 60;
      this.$emit("closePopup");
    },
    handOk() {
      if (this.number.length < 6) {
        Toast.fail("请输入正确的验证码！");
      } else {
        this.payCode();
      }
    },
    setTimer() {
      this.timer = setInterval(() => {
        const downtime = this.time;
        if (downtime === 0) {
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        this.time = downtime - 1;
      }, 1000);
    },
    hidePhone,
    parseTime,
    resetCode() {
      this.sendSmCode();
    },
    async sendSmCode() {
      const res = await sendYdSms({
        exPhone: this.phone,
        orderId: this.orderReturnDetail.orderId,
      });
      const { message, status } = res.data;
      if (status === 1) {
        this.time = 60;
        this.setTimer();
        Toast.success(`${message}`);
      } else {
        Toast.fail(`${message}`);
      }
    },
    async payCode() {
      this.isLoading = true;
      Toast.loading({
        message: "支付中...",
        forbidClick: true,
      });
      const { orderId, points, fingerprint, goodOrderId, redpacketId, mobile } =
        this.orderReturnDetail;
      const params = {
        smsCode: this.number,
        orderId: orderId,
        points: points,
        fingerprint: fingerprint,
        goodOrderId: goodOrderId,
        redpacketId: redpacketId,
        exPhone: mobile,
      };
      payOrder(params)
        .then((res) => {
          this.isLoading = false;
          Toast.clear();
          const { orderId, status, message, wxUrl } = res.data;
          const orderTime = this.parseTime(new Date().getTime());
          if (status === 1) {
            this.closePopup();
            this.$emit("redirectTo", {
              orderTime: orderTime,
              orderId: orderId,
              status: status,
              message: "",
              wxUrl: wxUrl,
            });
          } else {
            this.closePopup();
            this.$emit("redirectTo", { message: message, status: status });
          }
        })
        .catch((error) => {
          Toast.clear();
          this.isLoading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.outBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  &-title {
    font-weight: 600;
    font-size: 14px;
    color: #606265;
    color: #39394d;
    margin-top: 20px;
  }
  &-detail {
    font-weight: 400;
    font-size: 14px;
    color: #606265;
    margin-top: 54px;
  }
  &-time {
    font-weight: 400;
    font-size: 14px;
    color: #606265;
    margin: 10px 0;
  }
  &-input {
    margin: 30px 0;
    width: 95%;
    background: #ffffff;
    height: 60px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-bottom {
    width: 95%;
    background: linear-gradient(89.96deg, #ff8500 0.02%, #ff5f26 99.95%);
    height: 44px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    color: #ffffff;
    &:active {
      opacity: 0.5;
    }
  }
}
</style>
